<template>
  <div>
    <a-cascader
      style="width: 100%"
      v-model="cityValue"
      :options="options"
      :disabled="disabled"
      :show-all-levels="showAllLevels"
      size="small"
      :props="props"
      change-on-select
      placeholder="请选择地址"
      @change="change"
      @expand-change="expandChange"
      @blur="blur"
      @focus="focus"
      @visible-change="visibleChange"
      @remove-tag="removeTag"
      :getPopupContainer="
        (triggerNode) => {
          return triggerNode.parentNode || document.body
        }
      "
    ></a-cascader>
  </div>
</template>

<script>
import { districtList } from '@/api/district'

// 定义固定使用类型
const area = 'area' // 国内包含地区
const china = 'china' // 国内省市

export default {
  name: 'CitySelect',
  // 调用change函数时会改变value
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    value: {
      type: Array,
      default: () => [],
    },
    props: {
      type: Object,
      default: () => {},
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    showAllLevels: {
      type: Boolean,
      default: true,
    },
    filterable: {
      type: Boolean,
      default: false,
    },
    dataType: {
      type: String,
      default: 'area',
    },
    valueType: {
      type: String,
      default: '1',
    },
  },
  data() {
    return {
      cityValue: [],
      options: [],
      dataValue: [],
    }
  },
  watch: {},
  mounted() {
    // 判断类型
    switch (this.dataType) {
      case area:
        this.getDistrictList('area', this.valueType).then((res) => {
          this.options = res
          this.cityValue = this.value
        })
        break
      case china:
        this.getDistrictList('china', this.valueType).then((res) => {
          this.options = res
          this.cityValue = this.value
        })
        break
    }
  },
  methods: {
    getDistrictList: async function (type, valueType) {
      var params = {
        type: type,
        value_type: valueType,
      }
      await districtList(params).then((res) => {
        this.dataValue = res.data
      })
      return this.dataValue
    },
    change(val, selectedOptions) {
      console.log(selectedOptions)
      this.$emit('change', val, selectedOptions)
    },
    expandChange(val) {
      this.$emit('expand-change', val)
    },
    blur(val) {
      this.$emit('blur', val)
    },
    focus(val) {
      this.$emit('focus', val)
    },
    visibleChange(val) {
      this.$emit('visible-change', val)
    },
    removeTag(val) {
      this.$emit('remove-tag', val)
    },
  },
}
</script>
